import React from 'react'
import { connect } from 'dva'
import { mapStateToProps } from 'utils/view_utils'
import styles from './progresConstructionEditStyle.less'
import { CollapsiblePanels } from 'widget/CollapsiblePanels/index'
import PopUpSelect from 'widget/PopUpSelectnoModal/PopUpSelect'
import { isEmpty, cloneDeep, } from 'lodash'
import cx from 'classnames'
import Uploader from 'widget/Upload'
import locale from 'antd/lib/date-picker/locale/zh_CN';
import { Form, Input, Select, Row, Col, Button, DatePicker } from 'antd';
// import { message,DatePicker} from 'antd';
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
const FormItem = Form.Item;
const { RangePicker } = DatePicker;
const { Option } = Select
const routeView = function ({ dispatch, model, form }) {
    const { modelObj, namespace } = model
    const { getFieldDecorator } = form
    let { areaList, query, detail, addressList } = modelObj
    //console.log('selectItem',selectItem)
    // PopUpSelect 需要row配置
    const formItemLayout = {
        labelCol: {
            span: 1,

        },
        wrapperCol: {
            span: 16
        },
    }

    function updateModel(value, key, obj){
        detail[key] = value
        dispatch({
            type: `${namespace}/updateStore`,
            payload: { detail }
        })
    }
    
    function removeImgUrl(index,item) {
        detail[image].splice(index,1)
        dispatch({
          type: `${namespace}/updateModel`,
          payload: { detail }
        });
    }

    function updateImageModel(value){
        if(detail.image){
            detail.image.push(value)
        }else{
            detail.image = [value]
        }
        dispatch({
          type: `${namespace}/updateModel`,
          payload: { detail }
        });
    };
    //选择角色
    //date改变时
    return (
        <div className={cx('public_listMain')}>
            <div className="functionButton">
                <Button type='primary' loading={modelObj.btnLoading} onClick={() => {
                    form.validateFields((err) => {
                        if(!err){
                            dispatch({
                                type: `${namespace}/update`,
                                payload: {detail}
                            })
                        }
                      });
                }} >保存</Button>
            </div>
            <CollapsiblePanels title="在建工程信息" hideUpDownBtn={true}  >
                <Form autoComplete="off" className="auto-wrap" >

                    <Row style={{ borderBottom: "1px solid #EFF0F2" }}>
                        <Col span={8}>
                            <FormItem {...formItemLayout} label="开发商名称" labelCol={{ span: 5 }}>
                                <div>
                                {getFieldDecorator('developerName', {
                                    initialValue: detail.developerName,
                                    rules: [
                                        { required: true, whitespace: true, message: '请输入开发商名称' },
                                    ],
                                    })(<Input
                                    placeholder={'请输入开发商名称'}
                                    autoComplete={'off'}
                                    maxLength={50}
                                    onChange={(e) => { updateModel(e.target.value, 'developerName', 'detail') }}
                                    />)}
                                </div>
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem {...formItemLayout} label="小区名称" labelCol={{ span: 5 }}>
                                <div>
                                    {getFieldDecorator('name', {
                                        initialValue: detail.name,
                                        rules: [
                                            { required: true, whitespace: true, message: '请输入小区名称' },
                                        ],
                                        })(<Input
                                        placeholder={'请输入小区名称'}
                                        autoComplete={'off'}
                                        maxLength={50}
                                        onChange={(e) => { updateModel(e.target.value, 'name', 'detail') }}
                                        />)}
                                </div>
                    
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem {...formItemLayout} label="小区地址" labelCol={{ span: 5 }}>
                                <div>
                                    {getFieldDecorator('address', {
                                        initialValue: detail.address,
                                        rules: [
                                            { required: true, whitespace: true, message: '请输入小区地址' },
                                        ],
                                        })(<Input
                                        placeholder={'请输入小区地址'}
                                        autoComplete={'off'}
                                        maxLength={50}
                                        onChange={(e) => { updateModel(e.target.value, 'address', 'detail') }}
                                        />)}
                                </div>
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem {...formItemLayout} label="楼栋号" labelCol={{ span: 5 }} >
                                <div>
                                    {getFieldDecorator('build', {
                                        initialValue: detail.build,
                                        rules: [
                                            { required: true, whitespace: true, message: '请输入楼栋号' },
                                        ],
                                        })(<Input
                                        placeholder={'请输入楼栋号'}
                                        autoComplete={'off'}
                                        type="number"
                                        maxLength={50}
                                        onChange={(e) => { updateModel(e.target.value, 'build', 'detail') }}
                                        />)}
                                </div>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row style={{ borderBottom: "1px solid #EFF0F2" }}>

                        <Col span={8}>
                            <FormItem {...formItemLayout} label="图纸" labelCol={{ span: 5 }} >
                                <div className={cx('select-item-contain')}>
                                <Uploader uploadedUrls ={detail.image}
                                    removeFileCbf={(index)=>{removeImgUrl(index,"appPhoto")}}
                                    uploadSuccessCbf={ (imgUrl) => {updateImageModel(imgUrl)} }
                                    showType={'3'}
                                    fileType='image'
                                    fileMaxSize='1'
                                    minCropBoxWidth={1500}
                                    minCropBoxHeight={3000}
                                    maxFiles='9' />
                                </div>
                            </FormItem>
                        </Col>
                        { detail.qrcode ? 
                            <Col span={8} >
                                <FormItem {...formItemLayout} label="小程序码" labelCol={{ span: 5 }} >
                                    <div className={cx('select-item-contain')}>
                                            <img src={detail.qrcode} width={180} height={180} />
                                    </div>
                                </FormItem>
                            </Col>
                        : null
                        }
                       
                        

                    </Row>
                </Form>
            </CollapsiblePanels>
        </div>

    )


}
export default connect(mapStateToProps)(Form.create()(routeView))

